<template>
  <div v-loading="loading" class="todo_box">
    <div class="top_search">
      <div style="display: flex;">
        <el-input
            placeholder="搜索任务"
            prefix-icon="el-icon-search"
            style="width:100%;margin-right: 2vw"
        />
        <el-button

        >筛选
        </el-button>
      </div>
      <el-button
          icon="el-icon-plus"
          type="primary"
          @click="newTasks"
      >新建任务
      </el-button>
    </div>

    <div class="List">
      <el-table
          v-loading="tableLoading"
          :data="$store.getters['about/aboutList']"
          style="width: 100%"
      >
        <el-table-column
            align="center"
            cell-class-name="cellClassNameBold"
            label="任务名称"
            prop="name"
        >
        </el-table-column>
        <el-table-column
            align="center"
            label="优先级"
            prop="level"
            width="180">
          <template slot-scope="{row}">
            <el-tag v-if="row.flag === 1">低</el-tag>
            <el-tag v-if="row.flag === 2" type="warning">中</el-tag>
            <el-tag v-if="row.flag === 3" type="danger">高</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            cell-class-name="cellClassName"
            label="截止日期"
            prop="dateUpTo"
        >
        </el-table-column>
        <el-table-column
            :cell-class-name="'cellClassName'"
            align="center"
            label="创建人"
            prop="createUser">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
        >
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" style="color: #757575" type="text" @click="editTaskRef(row)"/>
            <el-button icon="el-icon-delete" style="color: #757575" type="text" @click=""/>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <div>共 {{ $store.getters['about/aboutList'].length }} 条任务</div>
      <div>
        <el-pagination
            :total="this.tableData.length"
            layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>

    <AddTask ref="AddTaskRef" @updateList="updateList"/>
  </div>
</template>

<script>
import AddTask from "@/components/AddTask/index.vue";


export default {
  name: "ToDoAbout",
  components: {AddTask},
  data() {
    return {
      tableData: [],
      loading: false,
      tableLoading: false
    }
  },
  created() {

  },
  methods: {
    newTasks() {
      this.$refs.AddTaskRef.dialogVisible = true
    },
    updateList() {
      this.tableLoading = true

      setTimeout(() => {
        this.tableLoading = false
      }, 1000)
    },
    editTaskRef(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-table_1_column_1 {
  font-weight: 600 !important;
}

::v-deep .el-table_1_column_3, ::v-deep .el-table_1_column_4 {
  color: #9f9f9f !important;
}

::v-deep .el-input__inner {
  border-radius: 12px;
}

::v-deep .el-button {
  border-radius: 12px;
}

.todo_box {
  margin-top: 1vw;

  .top_search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    padding: 0 2vh;
    margin: 2vh 0;

    div:nth-child(1) {
      color: #7a7a7a;
      font-size: 1.5vh;
    }
  }
}
</style>
